<template>
    <el-dialog title="维修详情" :visible.sync="dialogVisible" :close-on-click-modal="false">
         <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
            <el-form-item label="设备编号" prop="deviceId">
                <el-input v-model="dataForm.deviceId" :disabled="dataForm.deviceId" placeholder="设备编号" ></el-input>
            </el-form-item>
            <el-form-item label="故障表述" prop="breakdownMes">
                <el-input type="textarea" placeholder="请输入内容" v-model="dataForm.breakdownMes" maxlength="100" show-word-limit class="custom-textarea"></el-input>
            </el-form-item>
            <el-form-item label="故障码" prop="breakdownCode">
                <el-input v-model="dataForm.breakdownCode" placeholder="故障码"></el-input>
            </el-form-item>
            <el-form-item label="维修方案" prop="repairPlan">
                 <el-input type="textarea" placeholder="维修方案(字数不限)" v-model="dataForm.repairPlan"  show-word-limit class="custom-textarea"></el-input>
            </el-form-item>
            
         </el-form>
         <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
         </span>
    </el-dialog>
</template>
<style>
.custom-textarea .el-input__count {
  position: absolute;
  right: 10px;
  bottom: 5px;
  background: rgba(255,255,255,0.8);
  padding: 0 5px;
}
</style>
<script>
import { method } from 'lodash'
import { valid } from 'semver'

export default {
    data() {
        return {
            dialogVisible: true,
            dataForm: {
                deviceId: '',
                breakdownMes: '',//故障表述
                breakdownCode: '',//故障码
                repairPlan: '',//维修方案
            },
            dataRule: {
                breakdownMes: [{ required: true, message: '故障表述不能为空', trigger: 'blur' }],
                breakdownCode: [{ required: true, message: '故障码不能为空', trigger: 'blur' }, { validator: this.checkData, trigger: 'blur' }],
                repairPlan: [{ required: true, message: '维修方案不能为空', trigger: 'blur' }]
            }
        }
    },
    methods: {
        init(deviceId,id) {
            this.dialogVisible = true
            console.log(deviceId)
            // this.dataForm.deviceId =deviceId
            //要把该条数据的ID展示到详情表中，并且不能修改
            this.$http({
                url: this.$http.adornUrl(`/dss/operator/info/${id}`),
                method: 'get',
                params:this.$http.adornParams()
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.dataForm.deviceId = deviceId
                    this.dataForm.breakdownMes = data.dssRepairManageEntity.breakdownMes
                    this.dataForm.breakdownCode = data.dssRepairManageEntity.breakdownCode
                    this.dataForm.repairPlan = data.dssRepairManageEntity.repairPlan
                    this.dataForm.createTime=data.dssRepairManageEntity.createTime
                }
            })
        },
        //校验故障码中是否有中文
        checkData(dataRule, value, callback) {
        if(value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
            callback(new Error('不能包含中文!'))
        } else {
            callback()
        }
            }
            callback()
        },
        dataFormSubmit() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    this.$http({
                        url: this.$http.adornUrl(`/dss/operator/save`),
                        method: 'post',
                        data: this.$http.adornData({
                            'deviceId': this.dataForm.deviceId,
                            'breakdownMes': this.dataForm.breakdownMes,
                            'breakdownCode': this.dataForm.breakdownCode,
                            'repairPlan':this.dataForm.repairPlan
                        })
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.dialogVisible = false
                                this.$emit('refreshDataList')                
                            }
                        })
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                }
            })
        },
    }
}
</script>